<template>
	<view class="mx-course-item"  @tap="onTap" >
		<view class="course-img" :style="{backgroundImage: `url(${ imgPrefix+info.image.file_path})`}"> </view>
		<view class="course-info">
			<view class="course-title">
				<view class="course-name"> {{info.name}}</view>
			<!-- 	<view class="course-sold">已售999</view> -->
			</view>
			<view class="course-length">
				共{{info.lessons}}节课  
			</view>
			<view class="course-amount">
				<view class="course-price">
					￥{{info.price}}
				</view>
				<view class="course-places">
					名额：{{info.paid_nums}}/{{info.class_size}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	 	import {imgUrl} from '@/utils/config.js'
	
	export default {
		name:"MxCourseItem",
		data() {
			return { imgPrefix:imgUrl};
			
		},
		props: {
			info: {
				type: Object
			}
		},
	 
		methods: {
			onTap() {
				uni.navigateTo({
					url: `/pages/course/course-detail?courseId=${this.info.course_id}` 
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/var.scss';
@import '@/common/scss/mixins.scss';
.mx-course-item{
	display: flex;
	font-family: $font-family;
	.course-img{
		margin-right: 32rpx;
		width: 300rpx;
		height: 240rpx;
		border-radius: 5px;
		@include bg-img-cover;
	}
	
	.course-info{
		flex: 1;
		.course-title{
			margin-top: 14rpx;
			margin-bottom: 34rpx;
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			.course-name{
				font-weight: bold;
				font-size: 18px;
				color: $color-title;
			}
			
			.course-sold{
				font-size: 14px;
				color: #5E657D;
			}
		}
		
		.course-length{
			font-size: 16px;
			color: $color-info;
		}
		
		.course-amount{
			margin-top: 38rpx;
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			color: $color-amount;
			font-weight: bold;
			.course-price{
				font-size: 16px;
			}
			
			.course-places{
				font-size: 14px;
			}
		}
	}
}
</style>
